<template>
    <div class="login-container">
        <div class="login-box">
            <div class="login-left">
                <img class="login-left-img" src="../assets/images/banner.png" alt="login"/>
            </div>
            <div class="login-form">
                <div class="login-logo">
                    <img class="login-icon" src="../assets/images/logo.png" alt=""/>
                    <h2 class="logo-text">项目管理系统</h2>
                </div>
                <el-form ref="loginRef" :model="loginForm" label-width="0px" :rules="loginRules">
                    <el-row>
                        <el-col>
                            <el-form-item label="" prop="userAccount">
                                <el-input size="large" v-model="loginForm.userAccount" placeholder="用户账号">
                                    <template #prepend>
                                        <svg-icon icon-class="user"/>
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="" prop="password">
                                <el-input size="large" type="password" v-model="loginForm.password" placeholder="用户密码" @keyup.enter="handleLogin">
                                    <template #prepend>
                                        <svg-icon icon-class="password"/>
                                    </template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码
                            </el-checkbox>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col>
                            <el-form-item>
                                <el-button type="primary" size="large" style="width: 100%" @click.prevent="handleLogin">
                                    登陆
                                </el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>


                </el-form>
            </div>
        </div>
    </div>

</template>

<script setup>
    import Cookies from "js-cookie";
    import {encrypt, decrypt} from "@/utils/jsencrypt";
    import useUserStore from '@/store/modules/user'

    const userStore = useUserStore()
    const route = useRoute();
    const router = useRouter();
    const {proxy} = getCurrentInstance();

    const loginForm = ref({
        userAccount: "admin",
        password: "",
        rememberMe: false,
        code: "",
        uuid: ""
    });

    const loginRules = {
        userAccount: [{required: true, trigger: "blur", message: "请输入您的账号"}],
        password: [{required: true, trigger: "blur", message: "请输入您的密码"}],
        // code: [{ required: true, trigger: "change", message: "请输入验证码" }]
    };

    const codeUrl = ref("");
    const loading = ref(false);
    // 验证码开关
    // const captchaEnabled = ref(true);
    // 注册开关
    const register = ref(false);
    const redirect = ref(undefined);

    watch(route, (newRoute) => {
        console.log(route);
        console.log(newRoute);
        redirect.value = newRoute.query && newRoute.query.redirect;
    }, {immediate: true});

    function handleLogin() {
        proxy.$refs.loginRef.validate(valid => {
            if (valid) {
                loading.value = true;
                // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
                if (loginForm.value.rememberMe) {
                    Cookies.set("userAccount", loginForm.value.userAccount, {expires: 30});
                    Cookies.set("password", encrypt(loginForm.value.password), {expires: 30});
                    Cookies.set("rememberMe", loginForm.value.rememberMe, {expires: 30});
                } else {
                    // 否则移除
                    Cookies.remove("userAccount");
                    Cookies.remove("password");
                    Cookies.remove("rememberMe");
                }
                // 调用action的登录方法
                userStore.login(loginForm.value).then(() => {
                    const query = route.query;
                    const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
                        if (cur !== "redirect") {
                            acc[cur] = query[cur];
                        }
                        return acc;
                    }, {});
                    router.push({path: redirect.value || "/", query: otherQueryParams});
                }).catch(() => {
                    loading.value = false;
                });
            }
        });
    }

    function getCookie() {
        const userAccount = Cookies.get("userAccount");
        const password = Cookies.get("password");
        const rememberMe = Cookies.get("rememberMe");
        loginForm.value = {
            userAccount: userAccount === undefined ? loginForm.value.userAccount : userAccount,
            password: password === undefined ? loginForm.value.password : decrypt(password),
            rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
        };
    }


    getCookie();
</script>

<style lang='scss' scoped>
    body {
        color: #999;
    }

    .login-container {
        height: 100%;
        min-height: 550px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        background-color: #eeeeee;
        background-image: url("../assets/images/bg.svg");
        background-size: 100% 100%;
        background-size: cover;
    }

    .login-container .login-box {
        position: relative;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 96.5%;
        height: 94%;
        padding: 0 50px;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 10px;
    }

    .login-container .login-box .under {
        position: absolute;
        top: 13px;
        left: 18px;
    }

    .login-container .login-box .under a {
        text-decoration: none;
        font-size: 16px;
        color: #4c4c4c;
    }

    .login-container .login-box .under span {
        font-size: 16px;
        color: #4c4c4c;
        margin-left: 20px;
        cursor: pointer;
    }

    .login-container .login-box .login-left {
        width: 800px;
        margin-right: 10px;
        text-align: center;
    }

    .login-container .login-box .login-left .login-left-img {
        width: 80%;
    }

    .login-container .login-box .login-form {
        width: 420px;
        padding: 50px 40px 0px;
        background-color: var(--el-bg-color);
        border-radius: 10px;
        box-shadow: rgba(0, 0, 0, 0.1) 0 2px 10px 2px;
    }

    .login-container .login-box .login-form .login-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 45px;
    }

    .login-container .login-box .login-form .login-logo .login-icon {
        width: 80px;
    }

    .login-container .login-box .login-form .login-logo .logo-text {
        padding: 0 0 0 25px;
        margin: 0;
        font-size: 42px;
        font-weight: bold;
        color: #34495e;
        white-space: nowrap;
    }

    .login-container .login-box .login-form .el-form-item {
        margin-bottom: 10px;
    }

    .login-container .login-box .login-form .login-btn {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-top: 40px;
        white-space: nowrap;
    }

    .login-container .login-box .login-form .login-btn .el-button {
        width: 185px;
    }

    .captcha-img img {
        width: 125px;
    }

    .login-right {
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        align-items: center;
        justify-content: center;
    }

    .login-right-img {
        width: 125px;
    }

    @media screen and (max-width: 1250px) {
        .login-left {
            display: none;
        }
    }

    @media screen and (max-width: 600px) {
        .login-box {
            padding: 0 20px !important;
        }
        .login-form {
            width: 100% !important;
            padding: 10px !important;
        }
        .captcha-img img {
            width: 120px;
        }
        .login-icon {
            width: 20% !important;
        }
        .login-logo {
            margin: 20px 0 !important;
        }
        .logo-text {
            font-size: 32px !important;
        }
    }
</style>